/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* uView */
@import '@/uni_modules/vk-uview-ui/theme.scss';

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color: #333; //基本色
$uni-text-color-inverse: #fff; //反色
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;

/* 背景颜色 */
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

/* 边框颜色 */
$uni-border-color: #c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16px;

/* 图片尺寸 */
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 26px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;

// 全局自定义样式配置

// 颜色变量
$han-primary-color: #ff4d4f; // 主题色 (朱砂红)
$han-secondary-color: #e0b252; // 辅助色 (琥珀金)
$han-accent-color: #ff461f; // 强调色 (枫叶红)

$han-success-color: #5cb860; // 暖竹青
$han-warning-color: #ffab00; // 琥珀橙
$han-danger-color: #e53935; // 正朱红
$han-info-color: #2f80ed; // 天青蓝

$han-global-bg-color: #f0fcff; // 全局背景色 (雪白)
$han-global-primary-font-color: #333333; // 全局字体色-主要文字 (深灰)
$han-global-secondary-font-color: #777777; // 全局字体色-次要文字 (中灰)
$han-global-border-color: #e0d7c8; // 全局分隔线、边框色 (中灰)
$han-global-shadow-color: rgba(0, 0, 0, 0.08); // 全局阴影色 (浅灰)

// 字体大小（基于 rpx 单位）
$han-font-size-xs: 20rpx; // 极小文字（标签、辅助信息）
$han-font-size-sm: 24rpx; // 小号文字（注释、说明）
$han-font-size-md: 28rpx; // 中号文字（正文）
$han-font-size-base: 32rpx; // 正文字体（默认大小）
$han-font-size-lg: 36rpx; // 大号文字（副标题）
$han-font-size-xl: 42rpx; // 超大文字（主标题）

// 标题字体层级
$han-global-h1-font-size: $han-font-size-xl; // 36rpx
$han-global-h2-font-size: $han-font-size-lg; // 32rpx
$han-global-h3-font-size: $han-font-size-base; // 28rpx
$han-global-h4-font-size: $han-font-size-sm; // 24rpx

// 行高（基于字体大小的倍数）
$han-line-height-base: 1.5; // 正文字体行高（28rpx * 1.5 = 42rpx）
$han-line-height-title: 1.3; // 标题行高（更紧凑）
$han-line-height-small: 1.2; // 小字行高

// 字体家族（适配多端）
$han-global-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

// 布局变量
$han-global-spacing-xs: 10rpx; // 极小间距
$han-global-spacing-sm: 20rpx; // 小间距
$han-global-spacing-md: 30rpx; // 中等间距
$han-global-spacing-lg: 40rpx; // 大间距
$han-global-spacing-xl: 60rpx; // 超大间距

// 边框半径
$han-border-radius-sm: 10rpx; // 小圆角
$han-border-radius-md: 16rpx; // 默认圆角
$han-border-radius-lg: 24rpx; // 大圆角

// 按钮样式
$han-button-height-sm: 72rpx; // 小按钮高度
$han-button-height-md: 88rpx; // 默认高度
$han-button-height-lg: 104rpx; // 大按钮高度
$han-button-padding-sm: 16rpx 32rpx;
$han-button-padding-md: 20rpx 40rpx;
$han-button-padding-lg: 24rpx 48rpx;

// 输入框样式
$han-input-height-sm: 72rpx;
$han-input-height-md: 88rpx;
$han-input-height-lg: 104rpx;
$han-input-padding-sm: 16rpx 24rpx;
$han-input-padding-md: 20rpx 32rpx;
$han-input-padding-lg: 24rpx 40rpx;

// 卡片样式
$han-card-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
$han-card-border-radius: 16rpx;
$han-card-padding: $han-global-spacing-md;

// 顶栏样式
$han-nav-bar-height: 88rpx;
$han-footed-bar-height: 100rpx;

/* ========== 全局样式重置 ========== */
:root {
    --han-primary-color: #{$han-primary-color};
    --han-secondary-color: #{$han-secondary-color};
    --han-accent-color: #{$han-accent-color};
    --han-success-color: #{$han-success-color};
    --han-warning-color: #{$han-warning-color};
    --han-danger-color: #{$han-danger-color};
    --han-info-color: #{$han-info-color};
    --han-global-bg-color: #{$han-global-bg-color};
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: $han-global-font-family;
}

body,
uni-page-body {
    background-color: $han-global-bg-color;
    color: $han-global-primary-font-color;
    font-size: $han-font-size-base;
    line-height: $han-line-height-base;
}

/* 标题样式 */
h1 {
    font-size: $han-global-h1-font-size;
    line-height: $han-line-height-title;
}
h2 {
    font-size: $han-global-h2-font-size;
    line-height: $han-line-height-title;
}
h3 {
    font-size: $han-global-h3-font-size;
    line-height: $han-line-height-title;
}
h4 {
    font-size: $han-global-h4-font-size;
    line-height: $han-line-height-title;
}

/* 链接与按钮 */
a {
    color: $han-primary-color;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

.uni-button {
    border-radius: $han-border-radius-md;
    transition: all 0.3s;
    &-primary {
        background: $han-primary-color;
        color: white;
        &:hover {
            background: darken($han-primary-color, 10%);
        }
    }
    // 其他按钮变体...
}

/* 输入框 */
.uni-input {
    border: 2rpx solid $han-global-border-color;
    border-radius: $han-border-radius-md;
    padding: $han-input-padding-md;
    &:focus {
        border-color: $han-primary-color;
        box-shadow: 0 0 8rpx rgba($han-primary-color, 0.2);
    }
}

/* 卡片 */
.uni-card {
    background: white;
    border-radius: $han-card-border-radius;
    box-shadow: $han-card-shadow;
    padding: $han-card-padding;
}

/* 标签 */
.uni-tag {
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: $han-font-size-sm;
}

/* 分页器 */
.uni-pagination-item {
    width: 72rpx;
    height: 72rpx;
    border-radius: $han-border-radius-sm;
}

/* 图标统一为 rpx */
.uni-icons,
.uni-tabbar-item .icon {
    font-size: 48rpx !important;
}
